Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

frontend: fix load env behavior #1478

Merged
merged 3 commits into from
Oct 17, 2024
Merged

frontend: fix load env behavior #1478

merged 3 commits into from
Oct 17, 2024

Conversation

malinskibeniamin
Copy link
Contributor

@malinskibeniamin malinskibeniamin commented Oct 17, 2024 •
edited
Loading

rspack has different behavior compared to webpack when it comes to environment variables.

This has not been an issue in the case of cloud and admin UIs because we don't add more variables later on, everything is within .env file

// Good
console.log('1: ', process.env.REACT_APP_BUILD_TIMESTAMP); // 32503680000
// Bad
console.log('2: ', process.env['REACT_APP_BUILD_TIMESTAMP']); // 32503680000 (only possible thanks to spreading all process.env secrets inside rsbuild config which leaks secrets into frontend html, usually undefined)
// Bad
console.log('3: ', process.env?.REACT_APP_BUILD_TIMESTAMP); // undefined

How CRA does it:
https://github.com/facebook/create-react-app/blob/dd420a6d25d037decd7b81175626dfca817437ff/packages/react-scripts/config/env.js#L101-L107

New docs (latest Rspack release)
web-infra-dev/rsbuild#3718 (issue)
https://github.com/web-infra-dev/rsbuild/pull/3734/files (new docs)

https://rsbuild.dev/guide/migration/cra#env-variables
https://rsbuild.dev/guide/advanced/env-vars#processenv-replacement

BEFORE
Screenshot 2024-10-17 at 12 09 36

AFTER
Screenshot 2024-10-17 at 12 06 18

@malinskibeniamin malinskibeniamin added bug Something isn't working frontend labels Oct 17, 2024
@malinskibeniamin malinskibeniamin self-assigned this Oct 17, 2024
sago2k8
sago2k8 approved these changes Oct 17, 2024
View reviewed changes
Copy link
Contributor

@sago2k8 sago2k8 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great job @malinskibeniamin

sago2k8
sago2k8 reviewed Oct 17, 2024
View reviewed changes
frontend/rsbuild.config.ts
define: publicVars,
define: {
...publicVars,
'process.env': JSON.stringify(rawPublicVars),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will be filtered by REACT_APP_ variables? just making sure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will have REACT_APP prefix yes, this basically ensures we have the same behavior as CRA does with https://github.com/facebook/create-react-app/blob/dd420a6d25d037decd7b81175626dfca817437ff/packages/react-scripts/config/env.js#L101-L107

@malinskibeniamin malinskibeniamin merged commit 8bd811a into master Oct 17, 2024
6 checks passed
@malinskibeniamin malinskibeniamin deleted the fix-env-variable-loading branch October 17, 2024 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sago2k8 sago2k8 sago2k8 approved these changes

Assignees

@malinskibeniamin malinskibeniamin

Labels
bug Something isn't working frontend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@malinskibeniamin @sago2k8